<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>交易列表查询 - 管理后台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body {
            min-height: 100vh;
            background: linear-gradient(135deg, #e0e7ff 0%, #f5f7fa 100%);
            font-family: 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
        }

        .content-area {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 40px 0;
        }

        .card {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.10);
            padding: 40px 36px 32px 36px;
            max-width: 700px;
            width: 100%;
        }

        .section-title {
            font-size: 22px;
            color: #1a3a6c;
            margin-bottom: 28px;
            padding-bottom: 12px;
            border-bottom: 2px solid #1a3a6c;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .section-title i {
            color: #007bff;
            font-size: 22px;
        }

        .form-group {
            margin-bottom: 28px;
            display: flex;
            gap: 18px;
        }

        .form-group label {
            font-weight: 600;
            color: #444;
            font-size: 16px;
            margin-right: 8px;
        }

        .form-group input {
            padding: 10px 14px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            width: 120px;
            transition: all 0.3s;
        }

        .form-group input:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.08);
            outline: none;
        }

        .btn-primary {
            padding: 12px 28px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            border: none;
            background: #1a3a6c;
            color: #fff;
            transition: all 0.3s;
            box-shadow: 0 2px 8px rgba(26, 58, 108, 0.10);
        }

        .btn-primary:hover {
            background: #15315a;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(26, 58, 108, 0.18);
        }

        .table-area {
            margin-top: 24px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            background: #f8f9fa;
            border-radius: 8px;
            overflow: hidden;
        }

        th,
        td {
            padding: 12px 10px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }

        th {
            background: #f0f4f9;
            color: #1a3a6c;
            font-weight: 600;
        }

        tr:last-child td {
            border-bottom: none;
        }

        .no-data {
            color: #888;
            text-align: center;
            padding: 30px 0;
        }

        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 18px;
            margin-top: 18px;
        }

        .page-btn {
            background: #fff;
            border: 1px solid #1a3a6c;
            color: #1a3a6c;
            border-radius: 6px;
            padding: 8px 18px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .page-btn:disabled {
            color: #aaa;
            border-color: #eee;
            background: #f5f7fa;
            cursor: not-allowed;
        }

        .page-btn.active {
            background: #1a3a6c;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="content-area">
        <div class="card">
            <div class="section-title">
                <i class="fa fa-list"></i>交易列表查询
            </div>

            <div class="form-group">
                <label for="getlist-trade-size">每页数量</label>
                <input id="getlist-trade-size" type="number" value="10" min="1" max="50">
                <button class="btn-primary" onclick="fetchAndShowTradeList()">
                    <i class="fa fa-search"></i>查询
                </button>
            </div>

            <div class="table-area" id="getlist-trade-result"></div>

            <div class="pagination" id="pagination"></div>
        </div>
    </div>

    <script>
        let tradeListCache = [];
        let currentPage = 1;
        let pageSize = 10;

        function fetchAndShowTradeList() {
            pageSize = Math.max(1, Math.min(50, parseInt(document.getElementById('getlist-trade-size').value) || 10));

            fetch('http://localhost:8080/admin/trade/getList?nums=0&size=50')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应异常');
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.code === '200' && data.data && data.data.records) {
                        tradeListCache = data.data.records;
                        localStorage.setItem('admin_trade_list_cache', JSON.stringify(tradeListCache));
                        showTradeTable(1);
                    } else {
                        tradeListCache = [];
                        localStorage.removeItem('admin_trade_list_cache');
                        showTradeTable(1);
                    }
                })
                .catch(error => {
                    tradeListCache = [];
                    localStorage.removeItem('admin_trade_list_cache');
                    showTradeTable(1);
                    console.error('获取交易列表失败:', error);
                });
        }

        function showTradeTable(page) {
            const resultContainer = document.getElementById('getlist-trade-result');
            const paginationContainer = document.getElementById('pagination');

            if (!tradeListCache || tradeListCache.length === 0) {
                resultContainer.innerHTML = '<div class="no-data">未查询到数据</div>';
                paginationContainer.innerHTML = '';
                return;
            }

            currentPage = Math.max(1, page || 1);
            const total = tradeListCache.length;
            const totalPages = Math.ceil(total / pageSize);

            if (currentPage > totalPages) {
                currentPage = totalPages;
            }

            const start = (currentPage - 1) * pageSize;
            const end = Math.min(start + pageSize, total);

            let html = '<table>';
            html += '<tr><th>交易编号</th><th>卡号</th><th>类型</th><th>金额</th><th>时间</th><th>备注</th><th>操作</th></tr>';

            for (let i = start; i < end; i++) {
                const trade = tradeListCache[i];
                const tradeId = trade.tradeID || trade.tradeId || '';

                html += `
                    <tr>
                        <td>${tradeId}</td>
                        <td>${trade.cardID || trade.cardId || ''}</td>
                        <td>${trade.tradeType || trade.type || ''}</td>
                        <td>${trade.tradeMoney || trade.amount || ''}</td>
                        <td>${trade.tradeDate || trade.time || ''}</td>
                        <td>${trade.remark || ''}</td>
                        <td>
                `;

                if (tradeId) {
                    html += `
                        <button class="btn-primary" style="padding:6px 14px;font-size:14px;" onclick="deleteTrade('${tradeId}')">
                            <i class="fa fa-trash"></i> 删除
                        </button>
                    `;
                } else {
                    html += `
                        <button class="btn-primary" style="padding:6px 14px;font-size:14px;" disabled>
                            <i class="fa fa-trash"></i> 删除
                        </button>
                    `;
                }

                html += `
                        </td>
                    </tr>
                `;
            }

            html += '</table>';
            resultContainer.innerHTML = html;

            // 创建分页控件
            let paginationHtml = `
                <button class="page-btn" onclick="showTradeTable(${currentPage - 1})" ${currentPage <= 1 ? 'disabled' : ''}>
                    <i class="fa fa-angle-left"></i> 上一页
                </button>
                <span>第 ${currentPage} / ${totalPages} 页</span>
                <input id="jumpPageInput" type="number" min="1" max="${totalPages}" value="${currentPage}" style="width:50px;margin:0 8px;">
                <button class="page-btn" onclick="jumpToPage(${totalPages})">跳转</button>
                <button class="page-btn" onclick="showTradeTable(${currentPage + 1})" ${currentPage >= totalPages ? 'disabled' : ''}>
                    下一页 <i class="fa fa-angle-right"></i>
                </button>
            `;

            paginationContainer.innerHTML = paginationHtml;
        }

        function jumpToPage(totalPages) {
            let pageNum = parseInt(document.getElementById('jumpPageInput').value);
            if (isNaN(pageNum) || pageNum < 1) pageNum = 1;
            if (pageNum > totalPages) pageNum = totalPages;
            showTradeTable(pageNum);
        }

        function deleteTrade(tradeId) {
            if (!tradeId) return;

            if (!confirm('确定要删除该交易记录吗？此操作不可恢复。')) {
                return;
            }

            fetch(`http://localhost:8080/admin/trade/delete?tradeID=${encodeURIComponent(tradeId)}`, {
                method: 'DELETE'
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应异常');
                }
                return response.json();
            })
            .then(data => {
                if (data.code === '200') {
                    alert('删除成功！');
                    fetchAndShowTradeList();
                } else {
                    alert(data.message || '删除失败');
                }
            })
            .catch(error => {
                alert('请求失败：' + error.message);
                console.error('删除交易失败:', error);
            });
        }

        // 清理缓存
        window.addEventListener('beforeunload', () => {
            localStorage.removeItem('admin_trade_list_cache');
        });

        // 页面初始化
        window.addEventListener('DOMContentLoaded', () => {
            try {
                const cache = localStorage.getItem('admin_trade_list_cache');
                if (cache) {
                    tradeListCache = JSON.parse(cache);
                    showTradeTable(1);
                } else {
                    fetchAndShowTradeList();
                }
            } catch (e) {
                console.error('解析缓存失败:', e);
                fetchAndShowTradeList();
            }
        });
    </script>
</body>
</html>